/**
 * Created by 13296 on 2018/7/4.
 */
/**********************主函数***********************/
//加载推荐视频主节点
let initMainNodes= function () {
    let s = '<div class="top-grids" style="margin-top: 20px;">'+
            '   <div class="recommended-info">'+
            '       <h3>Recent Videos</h3>'+
            '   </div>'+
            '</div>'+
            '<div class="recommended">'+
            '   <div class="recommended-grids">'+
            '       <div class="recommended-info">'+
            '           <h3>News</h3>'+
            '       </div>'+
            '       <div  id="top" class="callbacks_container">'+
            '           <ul class="rslides" id="slider3">'+
            '               <li>'+
            '                   <div class="animated-grids" id="news1"></div>'+
            '               </li>'+
            '               <li>'+
            '                   <div class="animated-grids" id="news2"></div>'+
            '               </li>'+
            '           </ul>'+
            '       </div>'+
            '   </div>'+
            '</div>'+
            '<div class="recommended">'+
            '   <div class="recommended-grids" id="tv_shows1">'+
            '       <div class="recommended-info">'+
            '           <h3>TV_Shows</h3>'+
            '       </div>'+
            '   </div>'+
            '   <div class="recommended-grids" id="tv_shows2"></div>'+
            '</div>'+
            '<div class="recommended">'+
            '   <div class="recommended-grids" id="movies1">'+
            '       <div class="recommended-info">'+
            '           <h3>Movies</h3>'+
            '       </div>'+
            '   </div>'+
            '   <div class="recommended-grids" id="movies2"></div>'+
            '</div>'+
            '<div class="recommended">'+
            '   <div class="recommended-grids" id="sports1">'+
            '       <div class="recommended-info">'+
            '           <h3>Sports</h3>'+
            '       </div>'+
            '   </div>'+
            '   <div class="recommended-grids" id="sports2"></div>'+
            '</div>'+
            '<div class="recommended">'+
            '   <div class="recommended-grids" id="songs1">'+
            '       <div class="recommended-info">'+
            '           <h3>Songs</h3>'+
            '       </div>'+
            '   </div>'+
            '   <div class="recommended-grids" id="songs2"></div>'+
            '</div>';
    $(".main-grids").prepend(s);
};

//视频节点加载函数
let initVideo=function (video,node) {
    let s = '<div class="col-md-3 resent-grid recommended-grid">'+
            '   <div class="resent-grid-img recommended-grid-img">'+
            '       <a href="'+getRootPath_web()+'/video/single?video_id='+video.video_id+'"><img src="'+video.image_url+'" alt="" /></a>'+
            '       <div class="time small-time">'+
            '           <p>'+video.total_time+'</p>'+
            '       </div>'+
            '       <div class="clck small-clck">'+
            '           <span class="glyphicon glyphicon-time" aria-hidden="true"></span>'+
            '       </div>'+
            '   </div>'+
            '   <div class="resent-grid-info recommended-grid-info video-info-grid">'+
            '       <h5><a href="'+getRootPath_web()+'/video/single?video_id='+video.video_id+'" class="title">'+video.title+'</a></h5>'+
            '       <ul>'+
            '           <li><p class="author author-info"><a href="#" class="author">'+video.account+'</a></p></li>'+
            '           <li class="right-list"><p class="views views-info">'+video.views+' views</p></li>'+
            '       </ul>'+
            '   </div>'+
            '</div>';
    if(node != "#"){
        $(node).append(s);
    }
    return s;
};

//轮播视频加载
let initCarouselVideo=function (video,node) {
    let s = '<div class="col-md-3 resent-grid recommended-grid slider-first">'+
            '   <div class="resent-grid-img recommended-grid-img">'+
            '       <a href="'+getRootPath_web()+'/video/single?video_id='+video.video_id+'"><img src="'+video.image_url+'" alt="" /></a>'+
            '       <div class="time small-time slider-time">'+
            '           <p>'+video.total_time+'</p>'+
            '       </div>'+
            '       <div class="clck small-clck">'+
            '           <span class="glyphicon glyphicon-time" aria-hidden="true"></span>'+
            '       </div>'+
            '   </div>'+
            '   <div class="resent-grid-info recommended-grid-info">'+
            '       <h5><a href="'+getRootPath_web()+'/video/single?video_id='+video.video_id+'" class="title">'+video.title+'</a></h5>'+
            '       <div class="slid-bottom-grids">'+
            '           <div class="slid-bottom-grid">'+
            '               <p class="author author-info"><a href="#" class="author">'+video.account+'</a></p>'+
            '           </div>'+
            '           <div class="slid-bottom-grid slid-bottom-right">'+
            '               <p class="views views-info">'+video.views+' views</p>'+
            '           </div>'+
            '           <div class="clearfix"> </div>'+
            '       </div>'+
            '   </div>'+
            '</div>';
    $(node).append(s);
};

//根据视频类型展示视频
let display_videos=function (video_type,url){
    let method = "GET";
    let data = {
        video_type:video_type,
        pageNum:1,
    };
    ajax_base(data, url, method, "Json").then(function (data) {
            if (data.success) {
                let videos = data.obj;
                console.log(videos);
                for(var i = 0; i < videos.length; i++) {
                    if(i<4){
                        let node = '#'+video_type+'1';
                        initVideo(videos[i],node);
                        if(i==3 || i==(videos.length-1)){
                            $(node).append('<div class="clearfix"> </div>');
                        }
                    }else{
                        let node = '#'+video_type+'2';
                        initVideo(videos[i],node);
                        if(i==7 || i==(videos.length-1)){
                            $(node).append('<div class="clearfix"> </div>');
                        }
                    }
                }

            }
        }
    );
};

//我的关注和我的视频加载
let follow_or_user_display=function (url,pn){
    let method = "GET";
    let data = {
        user_id:get_current_user().user_id,
        pageNum:pn,
    };
    ajax_base(data, url, method, "Json").then(function (data) {
            if (data.success) {
                let videos = data.obj;
                console.log(videos);
                let node = '#';
                let s ='';
                if( videos != null &&videos.length !=0){
                    for(var i = 0; i < videos.length; i++) {
                        if(i<4){
                            s += initVideo(videos[i],node);
                            if(i==3 || i==(videos.length-1)){
                                s += '<div class="clearfix"> </div>';
                                let insert_str = '<div class="recommended-grids">'+s+'</div>';
                                // console.log(insert_str);
                                $(".recommended").append(insert_str);
                                s = '';
                            }
                        }else{
                            s += initVideo(videos[i],node);
                            if(i==7 || i==(videos.length-1)){
                                s += '<div class="clearfix"> </div>';
                                let insert_str = '<div class="recommended-grids">'+s+'</div>';
                                // console.log(insert_str);
                                $(".recommended").append(insert_str);
                                s = '';
                            }
                        }
                    }
                }else{
                    my_alert(200,"已经加载全部！");
                }
            }
        }
    );
};

//加载主页面
let initIndexRun=function () {

    let recent_video = [{"video_id":"2",
        "image_url":"resources/images/t1.jpg",
        "title":"Pellentesque vitae pulvinar tortor nullam interdum metus a imperdiet",
        "total_time":"3:04",
        "views":"2114200 ",
        "account":"John Maniya"}];

    // $("#form_node").attr("action",getRootPath_web()+"/video/search_view");

    //显示最新上传的3个视频
    let recent=function () {
        let url = "/video/recent_video";
        let method = "GET";
        let data = null;
        ajax_base(data, url, method, "Json").then(function (data) {
                if (data.success) {
                    let recent_video = data.obj;
                    console.log(recent_video);
                    for(var i = 0; i < recent_video.length; i++) {
                        let s = '<div class="col-md-4 resent-grid recommended-grid slider-top-grids">'+
                            '   <div class="resent-grid-img recommended-grid-img">'+
                            '       <a href="video/single?video_id='+recent_video[i].video_id+'"><img src='+recent_video[i].image_url+' alt="" /></a>'+
                            '       <div class="time">'+
                            '           <p style="color: cornflowerblue">'+recent_video[i].total_time+'</p>'+
                            '       </div>'+
                            '       <div class="clck">'+
                            '           <span class="glyphicon glyphicon-time" aria-hidden="true"></span>'+
                            '       </div>'+
                            '   </div>'+
                            '   <div class="resent-grid-info recommended-grid-info">'+
                            '       <h3><a href="video/single?video_id='+recent_video[i].video_id+'" class="title title-info">'+recent_video[i].title+'</a></h3>'+
                            '       <ul>'+
                            '           <li><p class="author author-info"><a href="#" class="author">'+recent_video[i].account+'</a></p></li>'+
                            '           <li class="right-list"><p class="views views-info">'+recent_video[i].views+' views</p></li>'+
                            '       </ul>'+
                            '   </div>'+
                            '</div>';
                        $(".top-grids").append(s);
                    }
                    $(".top-grids").append('<div class="clearfix"> </div>');

                }
            }
        );
    };recent();

    //轮播显示最新上传的8个news视频
    let news=function (){
        let url = "/video/videos";
        let method = "GET";
        let data = {
            video_type:"news",
            pageNum:1,
        };
        ajax_base(data, url, method, "Json").then(function (data) {
                if (data.success) {
                    let videos = data.obj;
                    console.log(videos);
                    for(var i = 0; i < videos.length; i++) {
                        if(i<4){
                            let node = '#news1';
                            initCarouselVideo(videos[i],node);
                            if(i==3){
                                $(node).append('<div class="clearfix"> </div>');
                            }
                        }else{
                            let node = '#news2';
                            initCarouselVideo(videos[i],node);
                            if(i==7 || i==(videos.length-1)){
                                $(node).append('<div class="clearfix"> </div>');
                            }
                        }
                    }

                }
            }
        );
    };news();

    let url = "/video/videos";
    //显示最新上传的8个tv_shows视频
    display_videos("tv_shows",url);

    //显示最新上传的8个movies视频
    display_videos("movies",url);

    //显示最新上传的8个sport视频
    display_videos("sports",url);

    //显示最新上传的4个songs视频
    display_videos("songs",url);

};initIndexRun();

//url映射
let url_mapper = function (itme_value) {
    switch (itme_value){
        case "推荐视频":
            return "/video/videos";
        case "我的关注":
            return "/video/follow_video";
        case "我的视频":
            return "/video/user_video";
        default:
            return "/video/videos";
    }
};

//我的视频或者关注视频滚动条触底刷新
let follow_or_user_flag = 0;
let follow_or_user_pn = 2;
let followOrUserScrollBottom =function(){
    var minAwayBtm = 2;  // 距离页面底部的最小距离
    $(window).scroll(function() {
        if(scroll_flag ==0){//非搜索滚轮事件有效
            var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
            // console.log('当前距离页面底部：' + awayBtm + 'px');
            if (awayBtm <= minAwayBtm ) {
                if(follow_or_user_flag!=0){
                    console.log('触发了'+follow_or_user_pn.toString());

                    let url = url_mapper($(".current_item").text());
                    console.log("这里是URL"+url);
                    follow_or_user_display(url,follow_or_user_pn);
                    follow_or_user_pn ++;
                }else{
                    follow_or_user_flag =1;
                }
            }
        }
    });
};followOrUserScrollBottom();

//加载搜索类型导航
let initIndexNav = function () {
    let s =  '<div class="mod_nav_list cf">'+
        '   <ul class="nav_list">'+
        '       <li class="list_item">'+
        '           <a class="item" href="javascript:;" style="color: #ff7800;">推荐视频</a>'+
        '       </li>'+
        '       <li class="list_item">'+
        '           <a class="item" href="javascript:;">我的关注</a>'+
        '       </li>'+
        '       <li class="list_item">'+
        '           <a class="item" href="javascript:;">我的视频</a>'+
        '       </li>'+
        '       <span class="nav_span" style="width: 100px"></span>'+
        '   </ul>'+
        '</div>';
    $(".main").prepend(s);

    $(".nav_list>.list_item").hover(function() {
        var x = $(this).offset().left-295; //计算li的位置
        $(".nav_span").css("marginLeft", x);
        $(".nav_span").css("width",$(this).width()-20);
        $(this).children("a").css("color","#ff7800");

        $(".list_item .item").removeClass("current_item");
        $(this).children("a").addClass("current_item");

        //删除子节点刷新界面
        $(".main-grids").children().remove();

        let nav_url = url_mapper($(this).children("a").text());
        console.log(nav_url);
        if($(this).children("a").text() == "推荐视频"){
            initMainNodes();
            initIndexRun();
            // return;
        }else{
            $(".main-grids").append('<div class="recommended"></div>');

            let pageNum = 1;
            let user_id = get_current_user().user_id;
            let url = url_mapper($(this).children("a").text());
            // console.log(url);
            // console.log(current_user);
            if(user_id != 0){
                scroll_flag = 0;//关注和我的视频界面滚轮有效
                follow_or_user_display(url,pageNum);

                //启动滚轮事件，初始化全局变量
                follow_or_user_pn = 2;
                follow_or_user_flag = 0;

            }else{
                my_alert(200,"登录后才可以查看！");
            }
        }
    }, function() {
        // $(".nav_span").css("marginLeft", "0");
        $(this).children("a").css("color","white");
    })

};initIndexNav();

